<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css" />
  </head>

  <body>
    <div class="container">
      <ul class="top">
        <!-- 基础模板 -->
        <!-- <li>
        <a href="javascript:;">首页</a>
        <ul class="sub">
          <li>
            <a href="javascript:;">
              <span>砂锅厨具</span>
              <img src="https://yanxuan.nosdn.127.net/3102b963e7a3c74b9d2ae90e4380da65.png?quality=95&imageView" alt="">
            </a>
          </li>
        </ul>
      </li> -->
      </ul>
    </div>
    <script src="./axios.js"></script>
    <!-- <script src="./index1.js"></script> -->
    <script src="./index.js"></script>
    <script>
      // axios.defaults.baseURL = 'http://ajax-api.itheima.net'

      // const list = document.querySelector('.top')
      // axios({
      //   url: '/api/category/top',
      //   method: 'GET',
      // })
      //   .then(({ data: res }) => {
      //     const arr = res.data.map((item) => {
      //       return axios({
      //         url: '/api/category/sub?id=' + item.id,
      //         method: 'GET',
      //       })
      //     })
      //     return Promise.all(arr)
      //   })
      //   .then((res) => {
      //     const html = res
      //       .map(({ data }) => {
      //         const { data: item } = data
      //         return `
      //   <li>
      //     <img src="${item.picture}" alt="">
      //   <a href="javascript:;">${item.name}</a>
      //   <ul class="sub">
      //  ${item.children.map(item =>{
      //   return `
      //   <li>
      //       <a href="javascript:;">
      //         <span>${item.name}</span>
      //         <img src="${item.picture}" alt="">
      //       </a>
      //     </li>
      //   `
      //  })}
      //   </ul>
      // </li>
      //   `
      //       })
      //       .join('')
      //     list.innerHTML = html
      //   })
      // async   await
    </script>
  </body>
</html>
